<template>
	<el-menu class="el-menu" mode="vertical" :default-active="active" unique-opened router>
		<template v-if="type === 'popover'">
			<popover-item v-for="item in list" :key="item.id" :data="item"></popover-item>
		</template>
		<template v-else-if="type === 'group'">
			<group-item v-for="item in list" :key="item.id" :data="item"></group-item>
		</template>
	</el-menu>
</template>

<script setup>
import { computed } from "vue"
import { useRoute } from "vue-router"
import PopoverItem from "./components/popover-item.vue"
import GroupItem from "./components/group-item.vue"

const props = defineProps({
	list: {
		type: Array,
	},
	type: {
		type: String,
		default: "group",
	},
})
const route = useRoute()
const active = computed(() => route.path)
const height = props.type === "group" ? "50px" : "36px"
</script>

<style lang="scss" scoped>
.el-menu {
	--el-menu-item-height: v-bind(height);
	border-right: 0;
}
</style>
